<!DOCTYPE html>
<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="elementui/index.css">
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/util.js"></script>
    <script src="elementui/index.js"></script>
</head>
<body>
        <div id="app">
<!--            <a onclick="location.href='add.html'">添加</a>-->

<!--            <input type="text" v-model="name">-->
<!--            <input type="button" value="搜索" @click="findPage()">-->
<!--            <el-table-->
<!--                    :data="tableData"-->
<!--                    stripe-->
<!--                    style="width: 100%">-->



<!--                <el-table-column-->
<!--                        prop="id"-->
<!--                        label="ID"-->
<!--                        width="180">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        prop="username"-->
<!--                        label="姓名"-->
<!--                        width="180">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        prop="address"-->
<!--                        label="地址">-->
<!--                </el-table-column>-->
<!--            </el-table>-->




                <div>
                    <el-input
                            v-model="name"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                </div>
            <el-button type="primary" @click="findPage()">搜索</el-button>
            <el-button type="primary" @click="toAdd()">添加</el-button>

               <div>
                   <el-table
                           current-row-key="id"
                           stripe highlight-current-row
                           :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                           style="width: 100%" size="small" >
                       <el-table-column
                               label="id"
                               prop="id">
                       </el-table-column>
                       <el-table-column
                               label="姓名"
                               prop="username">
                       </el-table-column>
                       <el-table-column
                               label="地址"
                               prop="address">
                       </el-table-column>
                       <el-table-column label="操作" align="center">


                           <template slot-scope="scope">

                                  <el-button
                                          size="mini"
                                          @click="handleEdit(scope.row)">编辑</el-button>
                                  <el-button
                                          size="mini"
                                          type="danger"
                                          @click="handleDelete(scope.row)">删除</el-button>
                           </template>


                       </el-table-column>
                   </el-table>
                   <el-pagination
                           background
                           @current-change="handleCurrentChange"
                           :page-size="page.pageSize"
                           :current-page="page.pageIndex"
                           layout="prev, pager, next,total"
                           :total="page.total">
                   </el-pagination>
               </div>

<!--            添加页面-->
            <el-dialog :visible.sync="addStatus" title="添加">
                <el-form :model="pojo" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm" >
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="pojo.username"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="address">
                        <el-input v-model="pojo.address"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="add()">立即创建</el-button>
                        <el-button @click="addStatus=false">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>


            <!--修改页面-->
            <el-dialog :visible.sync="editStatus" title="修改">
                <el-form :model="pojo" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm" >
                    <el-form-item label="用户名">
                        <el-input v-model="pojo.username"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="pojo.address"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="edit()">立即创建</el-button>
                        <el-button @click="editStatus=false">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>

        </div>
</body>
<script>
    var vue=new Vue({
        el:"#app",
        data:{
            tableData:[],
            page:{
                    pageIndex:1,
                    total:0,
                    pageSize:2
                },
                name:"",
                search: '',
            pojo:{},
            ruleForm: {},
            addStatus:false,
            editStatus:false,
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            }
        },
        methods:{
            toAdd(){
                this.addStatus=true;
                this.resetForm();

            },
            resetForm(){
              this.pojo={};
            },
            findPage(){
                axios.get("/admin/findPage?pageIndex="+this.page.pageIndex+"&name="+this.name).then(res=>{
                    this.tableData=res.data.records;
                    this.page.total=res.data.total;
                })
            },

            handleCurrentChange(pageIndex){
                this.page.pageIndex=pageIndex;
                this.findPage();
            },
            handleEdit(row) {
                this.editStatus=true;
                axios.get("/admin/findById?id="+row.id).then(res=>{
                    this.pojo=res.data;
                })
            },
            handleDelete(row) {
                if (confirm('确认删除吗?')){
                    axios.get("/admin/del?id="+row.id).then(res=>{
                        this.findPage();
                    })
                } else {
                    return;
                }

            },
            add(){
                this.$refs['addForm'].validate((valid) => {
                    if (valid) {
                        axios.post("/admin/add",this.pojo).then(res=>{
                            this.findPage();
                            this.addStatus=false
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            edit(){
                this.$refs['editForm'].validate((valid) => {
                    if (valid) {
                        axios.post("/admin/edit",this.pojo).then(res=>{
                            this.editStatus=false
                            this.findPage();

                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            }
        },
        created(){
            this.findPage();
        }
    })
</script>
</html>